<template>
	<view class="container">
		<view class="header">
			<view class="title">以图识图<span class="sub-title">（每日0点更新图库及特征）</span></view>
			<view class="sub-title">上传图片识别聚水潭普通商品资料商品编码;</view>
		</view>
		<view class="tui-box-upload">
			<tui-upload ref="uploadRef" @complete="complete" @reupload="reUpload"></tui-upload>
			
			<tui-button v-if="button_show" bold type="gray-primary" btn-size="medium" @click="upload" margin="30rpx 0">上传</tui-button>
			<tui-button v-else bold type="gray-primary" btn-size="medium" @click="ipoImage" margin="30rpx 0">对比</tui-button>
		</view>
		
		<tui-footer :fixed="true" :size="18" copyright=" Copyright © 2025 精诚智 IPO All Rights Reserved." style="margin-bottom: 40px;"></tui-footer>
	</view>
</template>

<script>
	//实际使用需要传入上传地址，以及上传接口返回数据进行调整组件
	export default {
		data() {
			return {
				// 未上传时显示上传按钮，已上传显示对比按钮
				button_show: true,
				// 上传接口地址
				uploadUrl: "/api/upload/uploadFile/",
				// 后台对比图像地址
				ipoImageUrl: "/api/ipo/images/",
				imageList: []
			}
		},
		methods: {
			ipoImage() {
				console.log('图片地址', this.imageList)
				let postData = { images: this.imageList }
				this.tui.request(this.ipoImageUrl, 'POST', postData, false, false, false).then((res) => {
					console.log('请求成功', res)
					this.tui.toast(res.msg)
				})
			},
			//调用upload 方法s
			uploadImg(file) {
				//上传的文件信息
				console.log('组件内返回的文件信息', file)
				// 文件上传的函数，返回一个promise
				//上传成功后返回上传后的图片地址，上传失败则返回false即可
				return new Promise((resolve, reject) => {
					//调用api上传，所有需要参数自行补充【上传自行实现，便于扩展】
					this.tui.uploadFile(this.uploadUrl, file.path).then((res) => {
						let url = this.tui.interfaceUrl() + res.url
						console.log('返回的图片路径', res.url)
						resolve(url)
					})
				})
			},
			upload() {
				if(this.imageList.length===0){
					this.tui.toast('请选择图片！')
					return;
				}
				//调用upload 方法上传，并传入函数，初始上传时勿传入索引值
				this.$refs.uploadRef && this.$refs.uploadRef.upload(this.uploadImg)
				this.button_show = false
			},
			//重新上传
			reUpload(e) {
				//当前上传按钮索引值
				console.log(e.index)
				//调用upload 方法上传，并传入函数，且此时需要传入index值
				this.$refs.uploadRef && this.$refs.uploadRef.upload(this.uploadImg, e.index)
			},
			complete(e) {
				console.log('complete', e)
				this.imageList = e.imgArr
				
				// 控制上传与对比按钮的显示
				if (e.manual) {
					this.button_show = false
				} else {
					this.button_show = true
				}
			}

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.container {
		padding: 20rpx 0 120rpx 0;
		box-sizing: border-box;
	}

	.header {
		padding: 80rpx 90rpx 60rpx 90rpx;
		box-sizing: border-box;
	}

	.title {
		font-size: 34rpx;
		color: #333;
		font-weight: 500;
	}

	.sub-title {
		font-size: 24rpx;
		color: #7a7a7a;
		padding-top: 18rpx;
	}

	.tui-box-upload {
		padding-left: 25rpx;
		box-sizing: border-box;
	}
	
</style>